<template>
  <view class="keyboard" :class="{ show: show, dark: dark }">
    <view class="keyboard-content">
      <view class="keyboard-content-left">
        <view
          class="keyboard-content-left-item"
          v-for="item in KeyboardNumber"
          :key="item"
          :index="item"
          @click="_setValue(item)"
        >
          <view class="keyboard-content-left-item-cell hover">
            {{ item }}
          </view>
        </view>
        <view
          class="keyboard-content-left-item"
          v-if="isDecimal"
          @click="_setValue('.')"
        >
          <view class="keyboard-content-left-item-cell hover">.</view>
        </view>
      </view>
      <view class="keyboard-content-right">
        <view class="keyboard-content-right-item" @click="_setValue('delete')">
          <view class="keyboard-content-right-item-cell hover">
            <image
              class="icon"
              v-if="!dark"
              src="https://apigw.ktqcy.com/qcy/clouderp-file/v1.0/upload/get/file?url=/app/qcq/IOGPFNHXAAKDNHJT8UQYOLSJGNGPA6NK.png"
              mode="aspectFill"
            ></image>
            <image
              class="icon"
              v-else
              src="https://apigw.ktqcy.com/qcy/clouderp-file/v1.0/upload/get/file?url=/app/qcq/IOGPFNHXAAKDNHJT8UQYOLSJGNGPA6NK.png"
              mode="aspectFill"
            ></image>
          </view>
        </view>
        <view class="keyboard-content-right-item" @click="confirm">
          <view
            class="keyboard-content-right-item-confirm"
            :class="{ disable: !money, hover: money }"
            :style="{ 'background-color': btnColor }"
            >{{ confirmText }}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>
  <script setup>
import { ref } from "vue";
const props = defineProps({
  show: {
    default: false,
    type: Boolean,
  },
  dark: {
    default: false,
    type: Boolean,
  },
  btnColor: {
    default: "#07C160",
    type: String,
  },
  confirmText: {
    default: "付款",
    type: String,
  },
  isDecimal: {
    default: true,
    type: Boolean,
  },
  value: {
    default: "",
    type: [Number, String],
  },
});
const emit = defineEmits(["confirm", "change"]);
// let KeyboardNumber = ref([1,2,3,4,5,6,7,8,9,0])
let KeyboardNumber = ref(["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]);
let money = ref("");
const _setValue = (e) => {
console.log("money.value.indexOf",money.value.indexOf("."));

  if (money.value.indexOf(".") > -1) {
    let digit = money.value.split(".")[1].toString().length;
    console.log("digit", digit);
    
    switch (e) {
        case ".":
          if (money.value.indexOf(".") > -1) break;
          if (money.value == "") {
            money.value = "0.";
          } else {
            money.value += e.toString();
          }
          break;
        case "delete":
          money.value =
            typeof (money.value) === "number" && isFinite(money.value)
              ? JSON.stringify(money.value)
              : money.value;
          if (money.value.length > 0) {
            money.value = money.value.substr(0, money.value.length - 1);
          }
          break;
        default:
          
          if (money.value.toString().length <= 7 && digit < 2) {
            money.value += e.toString();
          }
      }
  }else {
    
  switch (e) {
    case ".":
      if (money.value.indexOf(".") > -1) break;
      if (money.value == "") {
        money.value = "0.";
      } else {
        money.value += e.toString();
      }
      break;
    case "delete":
      money.value =
        typeof (money.value) === "number" && isFinite(money.value)
          ? JSON.stringify(money.value)
          : money.value;
      if (money.value.length > 0) {
        money.value = money.value.substr(0, money.value.length - 1);
      }
      break;
    default:
      if (money.value.toString().length >= 7) break;
      money.value += e.toString();
  }
  }
  // if(Number(money.value)>0.01){
  //   money.value = Math.trunc(Number(money.value) * 100) / 100;
  // }
  emit("change", money.value);
};
const confirm = () => {
  if (money.value) {
    // money.value = Math.trunc(Number(money.value) * 100) / 100;
    emit("confirm", Math.trunc(Number(money.value) * 100) / 100);
  }
};
</script>
  <style lang="less" scoped>
.dark {
  background-color: #1e1e1e !important;
  .keyboard-content-left-item-cell {
    background-color: #2c2c2c !important;
    color: rgba(255, 255, 255, 0.6);
  }
  .keyboard-content-right-item-cell {
    background-color: #2c2c2c !important;
  }
  .keyboard-content-left-item-cell:active {
    background-color: rgba(255, 255, 255, 0.2) !important;
  }
  .keyboard-content-right-item-cell:active {
    background-color: rgba(255, 255, 255, 0.2) !important;
  }
}
.keyboard {
  position: fixed;
  left: 0;
  transform: translateY(100%);
  transition: all 0.3s ease;
  bottom: 0;
  background-color: #f7f7f7;
  width: 100%;
  padding: 20rpx 0 40rpx 0;
  box-sizing: border-box;
  padding-bottom: 40px;
  .keyboard-content {
    display: flex;
    .keyboard-content-left {
      width: 75%;
      display: flex;
      flex-wrap: wrap;
      .keyboard-content-left-item {
        flex-basis: 33%;
        flex-grow: 1;
        padding: 0 0 15rpx 15rpx;
        box-sizing: border-box;
        .keyboard-content-left-item-cell {
          background-color: #ffffff;
          border-radius: 8rpx;
          text-align: center;
          font-size: 46rpx;
          line-height: 92rpx;
          font-weight: 500;
        }
        .keyboard-content-left-item-cell:active {
          background-color: rgba(0, 0, 0, 0.1);
        }
      }
      .keyboard-content-left-item:nth-child(10) {
        flex-basis: 66%;
        flex-grow: 1;
      }
    }
    .keyboard-content-right {
      width: 25%;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      .keyboard-content-right-item {
        width: 100%;
        padding: 0 15rpx 15rpx 15rpx;
        box-sizing: border-box;
        .keyboard-content-right-item-cell {
          border-radius: 8rpx;
          background-color: #ffffff;
          height: 92rpx;
          line-height: 92rpx;
          padding: 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          image {
            height: 60%;
            width: 40%;
          }
        }
        .keyboard-content-right-item-cell:active {
          background-color: rgba(0, 0, 0, 0.1);
        }
      }
      .keyboard-content-right-item:nth-child(2) {
        flex: 1;
        .keyboard-content-right-item-confirm {
          background-color: #07c160;
          opacity: 1;
          color: rgba(255, 255, 255, 0.8);
          height: 100%;
          border-radius: 8rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 34rpx;
        }
        .disable {
          opacity: 0.4;
        }
        .hover:active {
          opacity: 0.8;
        }
      }
    }
  }
}
.show {
  transition: all 0.3s ease;
  transform: translateY(0%) !important;
}
</style>


<!-- <template>
  <view class="keyboard" :class="{ show: show, dark: dark }">
    <view class="keyboard-content">
      <view class="keyboard-content-left">
        <view
          class="keyboard-content-left-item"
          v-for="item in KeyboardNumber"
          :key="item"
          :index="item"
          @click="_setValue(item)"
        >
          <view class="keyboard-content-left-item-cell hover">
            {{ item }}
          </view>
        </view>
        <view
          class="keyboard-content-left-item"
          v-if="isDecimal"
          @click="_setValue('.')"
        >
          <view class="keyboard-content-left-item-cell hover">.</view>
        </view>
      </view>
      <view class="keyboard-content-right">
        <view class="keyboard-content-right-item" @click="_setValue('delete')">
          <view class="keyboard-content-right-item-cell hover">
            <image
              class="icon"
              v-if="!dark"
              src="https://apigw.ktqcy.com/qcy/clouderp-file/v1.0/upload/get/file?url=/app/qcq/IOGPFNHXAAKDNHJT8UQYOLSJGNGPA6NK.png"
              mode="aspectFill"
            ></image>
            <image
              class="icon"
              v-else
              src="https://apigw.ktqcy.com/qcy/clouderp-file/v1.0/upload/get/file?url=/app/qcq/IOGPFNHXAAKDNHJT8UQYOLSJGNGPA6NK.png"
              mode="aspectFill"
            ></image>
          </view>
        </view>
        <view class="keyboard-content-right-item" @click="confirm">
          <view
            class="keyboard-content-right-item-confirm"
            :class="{ disable: !money, hover: money }"
            :style="{ 'background-color': btnColor }"
            >{{ confirmText }}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref } from "vue";
import { type } from "../../../uni_modules/uni-forms/components/uni-forms/utils";
const props = defineProps({
  show: {
    default: false,
    type: Boolean,
  },
  dark: {
    default: false,
    type: Boolean,
  },
  btnColor: {
    default: "#07C160",
    type: String,
  },
  confirmText: {
    default: "付款",
    type: String,
  },
  isDecimal: {
    default: true,
    type: Boolean,
  },
  value: {
    default: "",
    type: [Number, String],
  },
});
const emit = defineEmits(["confirm", "change"]);
let KeyboardNumber = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]);
let money = ref("");

const getDecimalPlaces=(num)=> {
  // 将数值转换为字符串
  const str = num.toString();
  // 检查是否有小数点
  if (str.indexOf('.') === -1) {
    return 0; // 如果没有小数点，则小数位数为0
  }
  // 获取小数点后的字符串部分
  const decimalPart = str.split('.')[1];
  // 返回小数位数，即字符串长度
  return decimalPart.length;
}
const _setValue = (e) => {
  switch (e) {
    case ".":
      console.log(e);
      // console.log("money.value", money.value);
      // console.log("money.value.indexOf('.')", money.value.indexOf("."));
      if (typeof (money.value )== "string") {
        if (money.value.indexOf(".") == -1) {
          if (money.value !== "") {
            money.value = `${money.value}.`;
          } else {
            money.value = `0.`;
          }
        }
      } else {
        let newMoney = `${money.value}`;
        if (newMoney.indexOf(".") == -1) {
          if (newMoney !== "") {
            newMoney = `${newMoney}.`;
            money.value = newMoney;
            
  console.log("money.value", money.value);
          } else {
            money.value = `0.`;
          }
        }
      }

      // if(money.value.indexOf('.') > -1) break
      // if(money.value ==''){
      // 	money.value = '0.'
      // }else{
      // 	money.value += e.toString()
      // }
      break;
    case "delete":
      money.value =
        typeof (money.value) === "number" && isFinite(money.value)
          ? JSON.stringify(money.value)
          : money.value;
      if (money.value.length > 0) {
        money.value = money.value.substr(0, money.value.length - 1);
      }
      break;
    default:
      if (typeof (money.value) == "string") {
        if (money.value.indexOf(".") == -1) {
          if (money.value.toString().length >= 7) break;
          money.value += e.toString();
        } else {
          console.log(money.value.toString().length);
          if (money.value.toString().length !== 10) {
            let digit = money.value.split(".")[1].toString().length;
            console.log("digit", digit);

            if (digit >= 2) break;
            money.value += e.toString();
          }
        }
      } else {
        if (getDecimalPlaces(money.value) <= 2) {
          if (money.value.toString().length >= 7) break;
          money.value += e.toString();
        } else {
          console.log(money.value.toString().length);
          if (money.value.toString().length !== 10) {
            let digit = money.value.split(".")[1].toString().length;
            console.log("digit", digit);

            if (digit >= 2) break;
            money.value += e.toString();
          }
        }
      }
  }
  if (Number(money.value) > 0.01) {
    money.value = Math.trunc(Number(money.value) * 100) / 100;
  }
  console.log("money.value", money.value);
  emit("change", money.value);
};
const confirm = () => {
  if (money.value) {
    money.value = Math.trunc(Number(money.value) * 100) / 100;
    emit("confirm", money.value);
  }
};
</script>
<style lang="less" scoped>
.dark {
  background-color: #1e1e1e !important;
  .keyboard-content-left-item-cell {
    background-color: #2c2c2c !important;
    color: rgba(255, 255, 255, 0.6);
  }
  .keyboard-content-right-item-cell {
    background-color: #2c2c2c !important;
  }
  .keyboard-content-left-item-cell:active {
    background-color: rgba(255, 255, 255, 0.2) !important;
  }
  .keyboard-content-right-item-cell:active {
    background-color: rgba(255, 255, 255, 0.2) !important;
  }
}
.keyboard {
  position: fixed;
  left: 0;
  transform: translateY(100%);
  transition: all 0.3s ease;
  bottom: 0;
  background-color: #f7f7f7;
  width: 100%;
  padding: 20rpx 0 40rpx 0;
  box-sizing: border-box;
  padding-bottom: 40px;
  .keyboard-content {
    display: flex;
    .keyboard-content-left {
      width: 75%;
      display: flex;
      flex-wrap: wrap;
      .keyboard-content-left-item {
        flex-basis: 33%;
        flex-grow: 1;
        padding: 0 0 15rpx 15rpx;
        box-sizing: border-box;
        .keyboard-content-left-item-cell {
          background-color: #ffffff;
          border-radius: 8rpx;
          text-align: center;
          font-size: 46rpx;
          line-height: 92rpx;
          font-weight: 500;
        }
        .keyboard-content-left-item-cell:active {
          background-color: rgba(0, 0, 0, 0.1);
        }
      }
      .keyboard-content-left-item:nth-child(10) {
        flex-basis: 66%;
        flex-grow: 1;
      }
    }
    .keyboard-content-right {
      width: 25%;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      .keyboard-content-right-item {
        width: 100%;
        padding: 0 15rpx 15rpx 15rpx;
        box-sizing: border-box;
        .keyboard-content-right-item-cell {
          border-radius: 8rpx;
          background-color: #ffffff;
          height: 92rpx;
          line-height: 92rpx;
          padding: 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          image {
            height: 60%;
            width: 40%;
          }
        }
        .keyboard-content-right-item-cell:active {
          background-color: rgba(0, 0, 0, 0.1);
        }
      }
      .keyboard-content-right-item:nth-child(2) {
        flex: 1;
        .keyboard-content-right-item-confirm {
          background-color: #07c160;
          opacity: 1;
          color: rgba(255, 255, 255, 0.8);
          height: 100%;
          border-radius: 8rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 34rpx;
        }
        .disable {
          opacity: 0.4;
        }
        .hover:active {
          opacity: 0.8;
        }
      }
    }
  }
}
.show {
  transition: all 0.3s ease;
  transform: translateY(0%) !important;
}
</style> -->